<template>
    <div>
        <div>
            <el-form :model="form" label-suffix="：" ref="form" label-width="120px" :rules="rules" :validate-on-rule-change="false">
                <el-row :gutter="20">
                    <el-col :span="12" >
                        <el-form-item :label="$t('achievementApply.thesisTitle')" prop="thesisTitle">
                            <el-input v-model.trim="form.thesisTitle" :maxlength="128" :disabled="editFlag || paperDisabled" ></el-input>
                            <!-- <el-select
                              :disabled="editFlag || paperDisabled"
                              v-model.trim="form.thesisTitle"
                              filterable
                              allow-create
                              default-first-option
                              style="width: 100%;height: 32px;"
                              :placeholder="$t('inputPlaceholder')">
                              <el-option
                                v-for="item in thesisTitleList"
                                :key="item.value"
                                :label="item.value"
                                :value="item.value">
                              </el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item :label="$t('label.stuCode')" prop="stuNo">
                          <el-input v-model="form.stuNo" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div style="width: 100%;padding-left: 120px;margin-bottom: 5px;" v-if="paperDisabled">
                  <span class="el-upload__tip tips_margin" style="color: red"> * </span>
                  <span class="el-upload__tip tips_margin">{{$t('preDefense.titleEditTips')}}</span>
                </div>
                <el-row :gutter="20">
                    <el-col :span="12" >
                        <el-form-item :label="$t('label.stuName')" prop="stuName">
                            <el-input v-model="form.stuName" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item :label="$t('label.grade')" prop="grade">
                            <el-input v-model="form.grade" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" >
                        <el-form-item :label="$t('achievementApply.teacherName')" prop="stuTutorName">
                            <el-input v-model="form.stuTutorName" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" >
                        <el-form-item :label="$t('label.college')" prop="academyName">
                            <el-input v-model="form.academyName" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" >
                        <el-form-item :label="$t('label.major')" prop="majorName">
                            <el-input v-model="form.majorName" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('preDefense.preDefenseTime')" prop="defenseDate">
                            <el-date-picker v-model="form.defenseDate" type="date" :clearable="false" value-format="timestamp" format="yyyy-MM-dd" :disabled="editFlag" style="width:100%;"> </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('preDefense.defenseAddr')" prop="defenseAddr">
                            <el-input v-model="form.defenseAddr" maxlength="20" :disabled="editFlag"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.researchDirection')" prop="researchField">
                          <!--<DictSelect v-model="form.researchField" :data="options.direction" :clearable="false" :disabled="editFlag"></DictSelect>-->
                          <el-select v-model="form.researchField" style="width: 100%;" filterable allow-create default-first-option @change="handleChange" v-clearreadonly>
                            <el-option v-for="item in options.direction" :key="item.value" :label="item.label" :value="item.label"></el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingCategory')" >
                            <el-input v-model="form.eduModeI18n" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.trainingLevel')" >
                            <el-input v-model="form.eduLevelI18n" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item :label="$t('label.formLearning')" >
                            <el-input v-model="form.studyFormI18n" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('label.degreeCategory')" >
                            <el-input v-model="form.degreeTypeI18n" maxlength="20" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item :label="$t('preDefense.researchResults')" prop="researchResult">
                            <el-input v-model="form.researchResult" type="textarea" maxlength="200" :rows="5" resize="none" :disabled="editFlag"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import { applyGetStu, preDefenseApply, applyDetail } from "common/src/api/preDefense";
import { getPaperTitle } from "common/src/api/paperAchievements";
import commonMixins from 'common/src/views/practiceManagement/commonMixins';
import { findDirMaintenList } from "common/src/api/culture/campusProfession";
import moment from 'moment';
export default {
    components: {},
    mixins: [commonMixins],
    props: {
        editFlag: { // true不能编辑
            type: Boolean,
            default: false
        },
        detailsFlag: {
            type: Boolean,
            default: false
        },
        yearTerms: {
          type: String,
          default: ''
        },
        row: {
          type: Object,
          default: {}
        },
        options: {
          type: Object,
          default: {}
        },
    },
    data() {
        return {
            form: {
                thesisTitle: '',
                stuNo: '',
                stuName: '',
                grade: '',
                stuTutorName: '',
                academyName: '',
                majorName: '',
                defenseDate: '',
                defenseAddr: '',
                researchField: '',
                eduMode: '',
                eduLevel: '',
                studyForm: '',
                degreeType: '',
                researchResult: ''
            },
            rules: {
                thesisTitle: [{ required: true, validator: this.validateInput, trigger: 'blur' }],
                defenseAddr: [{ required: true, validator: this.validateInput, trigger: 'blur' }],
                defenseDate: [{ required: true, message: this.$t('message.plzSelect'), trigger: 'blur' }],
                researchResult: [{ required: true, validator: this.validateInput, trigger: 'blur' }],
              researchField: [{ required: true, validator: this.validateInput, trigger: ['blur','change']}]
            },
            remark: '',
            thesisTitleList: [],
            paperDisabled: false
        };
    },
    computed: {

    },
    created() {
    },
    mounted() {
      if (!this.row.id) { // 新增的时候需要查用户信息和题目，修改的时候不用
        this.getUserInfo();
      } else {
        this.getDetail();
      }
    },
    methods: {
      handleChange(val) {
        this.$forceUpdate()
      },

      // 根据申请id查询详情
      getDetail () {
        applyDetail(this.row.id).then(res => {
          if (res.code === 200) {
            let resultData = res.data;
            this.form = resultData;
            this.form.defenseDate = moment(this.form.defenseDate).format('x');
            this.getTitle();
          }
        });
      },
      // 提交、修改申请接口
      save(flag) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (typeof(this.form.defenseDate) === 'string') {
              this.form.defenseDate = parseInt(this.form.defenseDate);
            }
            let param = {
              id: this.row.id || '',
              yearTerm: this.yearTerms,
              thesisTitle: this.form.thesisTitle,
              stuNo: this.form.stuNo,
              stuName: this.form.stuName,
              grade: this.form.grade,
              stuTutorName: this.form.stuTutorName,
              academyName: this.form.academyName,
              majorName: this.form.majorName,
              defenseDate: this.form.defenseDate,
              defenseAddr: this.form.defenseAddr,
              researchField: this.form.researchField,
              eduMode: this.form.eduMode,
              eduLevel: this.form.eduLevel,
              studyForm: this.form.studyForm,
              degreeType: this.form.degreeType,
              researchResult: this.form.researchResult
            };
            preDefenseApply(param)
            .then(response => {
              if (response.code === 200) {
                if (flag === 'edit') {
                  this.$message({
                    type: "success",
                    message: this.$t('message.editSuccess')
                  });
                } else {
                  this.$message({
                    type: "success",
                    message: this.$t('message.submitSuccess')
                  });
                }
                this.$emit('emit:back');
              }
            });
          }
        });
      },
      // 获取用户信息
      getUserInfo () {
        applyGetStu()
        .then(res => {
          this.form = _.cloneDeep(res.data);
          //console.info(this.form)
          //this.form.researchField =  '';
          this.getTitle();
        });
      },
      // 获取论文题目
      getTitle () {
        let param = {
          stuNo: this.form.stuNo,
          yearTerm: this.yearTerms
        };
        getPaperTitle(param)
        .then(res=>{
          if (res.data.length > 0) {
            this.paperDisabled = true;
            if (!this.row.id) { // 新增的时候默认赋值
              this.form.thesisTitle = res.data[0].paperName;
            }
            res.data.forEach(item=>{
              let obj = { value: item.paperName, label: item.paperName };
              this.thesisTitleList.push(obj);
            });
          } else {
            this.thesisTitleList = [];
            this.paperDisabled = false;
          }
        });
      },
    }
};
</script>

<style scoped lang="scss">
.con {
    &_footer1 {
        padding-left: 120px;
    }
}
</style>
